<template>
  <div >
    <van-nav-bar
      title="基因产品"
    />
<!--    显示出产品的信息-->
<!--    <div v-for="item in products" :key="item.id">-->
<!--      {{item.title}}-->
<!--      <tab-cardshow :title=/>-->
      <!--新的-->
<!--父模板调用card组件 要将数据传过去card中 让card显示出来 传输的数据有：标题，价钱-->
<!--    <div v-for="(item,index) in products" :key="item.id" :card="products">-->
    <div class="all-products">
      <!--        {{"index:"+ index}}-->
<!--      <div v-if="index < 2">-->

        <van-row tyle="flex" >
          <!--一行俩个-->
          <tab-cardshow  v-for="(product, index) in products"
                         :key="index"
                         :cardItems="product"
                         @toClickBt="toClickBt(product.id)"/>
        </van-row>

      <!-------------------------------------------------------------->
<!--      <div class="flex">-->
<!--        <tab-cardshow  v-for="(product, index) in products"-->
<!--                       :key="index"-->
<!--                       :cardItems="product"-->
<!--                       @toClickBt="toClickBt(product.id)"/>-->
<!--      </div>-->
<!----------------------------------------------------------------------->
<!--      <div class="flex">-->
<!--        <tab-cardshow v-for="(product, index) in list" :key="index" :cardItems="product"></tab-cardshow>-->
<!--      </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
// import { NavBar, Toast } from 'vant'
// new
import { NavBar, Toast, Row, Col } from 'vant'
import TabCardshow from './tab-card'

export default {
  name: 'tab-products',
  components: {
    [NavBar.name]: NavBar,
    // new
    TabCardshow,
    [TabCardshow.name]: TabCardshow,
    [Col.name]: Col,
    [Row.name]: Row
  },
  data () {
    return {
      products: []
      // list: [
      //   {
      //     name: 'abc',
      //     age: 28,
      //     sex: '水边'
      //   },
      //   {
      //     name: 'abc',
      //     age: 28,
      //     sex: '水边'
      //   },
      //   {
      //     name: 'abc',
      //     age: 28,
      //     sex: '水边'
      //   },
      //   {
      //     name: 'abc',
      //     age: 28,
      //     sex: '水边'
      //   },
      //   {
      //     name: 'abc',
      //     age: 28,
      //     sex: '水边'
      //   }
      // ]
    }
  },
  async mounted () {
    this.setActiveTab(1)
    await this.getProducts()
  },
  methods: {
    // 点击整个产品之后会跳转
    toClickBt (id) {
      this.$router.push({ name: 'product', params: { id: id } })
    },
    ...mapMutations({
      setActiveTab: 'tabbar/setActiveTab'
    }),
    async getProducts () {
      const { data } = await this.$api.product.productList()
      if (data.code !== 200) {
        Toast('网络错误，请重新刷新页面')
      } else {
        this.products = data.data
      }
      console.log(this.products)
    }
  }
}
</script>

<style lang="less">
  .all-products{
    padding-bottom: 100px;
  }
  /*标题样式*/
  .van-nav-bar__title {
    margin: 0 auto;
    max-width: 60%;
    color: black;
    font-size: 1rem;
    font-weight: 800;
  }
  /*.flex{*/
  /*  display: flex;*/
  /*  justify-content: space-between;*/
  /*  flex-wrap: wrap;*/
  /*}*/
</style>
